import React,{useState,useEffect} from "react";
import './register.scss';
import { Button, Form, Input } from 'antd';
import { useNavigate } from "react-router-dom";
import { $register ,$SendCode,$ConfirmCode} from "../../api/registerapi";
import MyNotification from "../../components/MyNotification/MyNotification";
import logo from "../../resource/logo.png";
export default function Register(){
    // 倒计时剩余时间
    const [countdown, setCountdown] = useState(0);
    // 按钮是否禁用
    const [disabled, setDisabled] = useState(false);

    //通知框状态
    const [notiMsg, setNotiMsg] = useState({ type: "", description: "" });
    //表单
    const [form] = Form.useForm();
    const onFinish = async (values) => {
        const Ycode = form.getFieldValue('code');
        const response1 = await $ConfirmCode({captcha: Ycode.toString()});
        if (response1.code) {
            const { code, ...formData } = values;
            console.log(formData);
            const response = await $register(formData);
            if (response.code) {
                setNotiMsg({type: "success", description: response.message});
            } else {
                setNotiMsg({type: "error", description: response.message})
            }
        }
        else{
            setNotiMsg({type: "error", description: response1.message})
        }
    }
      //导航
    const navigate = useNavigate();
    useEffect(() => {
        if (notiMsg.type === "success") {
            navigate("/");
        }
    }, [notiMsg]);
    //获取验证码的倒计时的函数
    useEffect(() => {
        let timer;
        if (countdown > 0) {
            timer = setInterval(() => {
                setCountdown(prevCountdown => prevCountdown - 1);
            }, 1000);
        } else {
            setDisabled(false); // 倒计时结束后恢复按钮状态
        }

        return () => clearInterval(timer); // 组件卸载时清除定时器
    }, [countdown]);
    //点击验证码按钮
    const handleClick = async () => {
        const email = form.getFieldValue('email');
        const response=await $SendCode({email:email.toString()});
        if(response.code) {
            let token=response.data;
            localStorage.setItem('token', token);
        }
        setDisabled(true); // 禁用按钮
        setCountdown(60); // 开始倒计时
    };

    return(
        <div className='register'>
            <div className='left' style={{display: "flex", justifyContent: "center", alignItems: "center"}}>
                <img src={logo} style={{width: '150px', height: '150px'}}/>
            </div>
            <div className='right'>
                <div style={{width: "50vw", height: "20vh"}}></div>
                <h2 style={{color: 'rgb(178, 234, 230)', marginLeft: "40px"}}>统一身份验证</h2>
                <Form
                    name="basic"
                    form={form}
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    style={{
                        maxWidth: 600,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    autoComplete="off"
                >
                    <Form.Item
                        label="邮箱"
                        name="email"
                        rules={[
                            {
                                required: true,
                                message: '请输入你的邮箱',
                            },
                        ]}
                    >
                        <Input/>
                    </Form.Item>


                    <Form.Item
                        label="姓名"
                        name="name"
                        rules={[
                            {
                                required: true,
                                message: '请输入姓名',
                            },
                        ]}
                    >
                        <Input/>
                    </Form.Item>


                    <Form.Item
                        label="身份证号"
                        name="identity_card_number"
                        rules={[
                            {
                                required: true,
                                message: '请输入身份证号',
                            },
                        ]}
                    >
                        <Input/>
                    </Form.Item>


                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码',
                            },
                        ]}
                    >
                        <Input.Password/>
                    </Form.Item>
                    <Form.Item
                        label="验证码"
                        name="code"
                        rules={[
                            {
                                required: true,
                                message: '请输入验证码',
                            },
                        ]}
                    >
                        <Input/>
                    </Form.Item>


                    <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                        <div style={{display:'flex',justifyContent:"center"}}>
                                <span onClick={() => {
                                    navigate("/");
                                }} style={{color: 'blue', textAlign: 'center', marginRight: '100px'}}>去登录
                                </span>
                            <Button type="primary" onClick={handleClick} disabled={disabled}>
                                {countdown > 0 ? `${countdown} 秒后重试` : '获取验证码'}
                            </Button>
                        </div>
                        <Button type="primary" htmlType="submit" style={{
                            backgroundColor: 'rgb(178, 234, 230)',
                            width: '140px',
                            height: "40px",
                            marginTop: '20px'
                        }}>
                            注册
                        </Button>
                        <Button onClick={() => {
                            form.resetFields()
                        }} style={{marginLeft: "40px", width: '140px', height: "40px"}}>
                            取消
                        </Button>
                    </Form.Item>
                </Form>
                <MyNotification notiMsg={notiMsg}/>
            </div>
        </div>
    )
}